import React, {Component} from 'react';
import GoBack from "@/components/TheGoBack";
import {Col, Form, Row, Input, Divider, Select, DatePicker, Descriptions, Space, Button} from "antd";
import './style.less'
import moment from 'moment';
import TheTable from '@/components/TheTable'
import {apiGetCheckInData, apiConfirmWriteOff} from "../../../request/hotelRoomStatus";

const {RangePicker} = DatePicker;

class CheckIn extends Component {
    constructor(props) {
        super(props);
        this.state = {
            btnLoading: false,
            columns: [
                {
                    title: "房型列表",
                    dataIndex: "serviceName",
                    key: "serviceName",
                },
                {
                    title: "房间名称",
                    dataIndex: "roomName",
                    key: "roomName",
                },
                {
                    title: "房间价格（前台默认价格）",
                    dataIndex: "detailPrice",
                    key: "detailPrice",
                    render: (text, record) => {
                        return <React.$Price price={record.detailPrice}/>
                    }
                },
                // {
                //     title: "排房",
                //     dataIndex: "doctorName",
                //     key: "doctorName",
                // },
            ],
            dataSource: [],
            hotelOrderId: ''
        }
    }

    componentDidMount() {
        this.getDay()
        this.getData(this.props.match.params.qr,this.props.match.params.vt)
    }

    // 入住信息
    getData = async (qr,vt) => {
        // console.log(qr!=="-1",vt)
        let params = {}
        if (qr !== "-1"){
            params.qrCode = qr
        }
        if (vt !== "-1"){
            params.vtCode = vt
        }
        // console.log(params)
        let res = await apiGetCheckInData(params)
        if (res.code === 0) {
            this.setState({
                dataSource: res.data.hotelOrderDetailVoList,
                hotelOrderId: res.data.hotelOrderId
            })
            this.formRef.setFieldsValue({
                source: 0,
                memberName: res.data.memberName,
                memberPhone: res.data.memberPhone,
                petName: res.data.petName,
                petVarieties: res.data.petVarieties,
                petSex: res.data.petSex,
                sterilizationStatus: res.data.sterilizationStatus,
                vaccineStatus: res.data.vaccineStatus,
                days: res.data.days,
                checkIn: [
                    moment(res.data.beginTime),
                    moment(res.data.endTime),
                ],
                birthday: moment(res.data.birthday),
            })
        } else {
            // this.props.history.goBack()
        }
    }
    //form表单确定事件
    onFinish = async (values) => {
        console.log(values)
        let res = await apiConfirmWriteOff({"hotelOrderId": this.state.hotelOrderId})
        if (res.code === 0) {
            React.$message({
                type: 'info',
                content: '添加成功'
            })
            this.props.history.goBack()
        }
    }
    getDay = () => {
        // let { checkIn } = this.formRef.getFieldsValue();
        // this.formRef.setFieldsValue({
        //     "days": moment(checkIn[1]).diff(moment(checkIn[0]), 'days')
        // })
    }
    disabledDate = (current) => {
        // Can not select days before today and today
        return current && current < moment().endOf('day');
    };
    onChangeCheckIn = (date) => {
        // this.getDay();
    }

    render() {
        let {btnLoading, dataSource, columns} = this.state;
        return (
            <div className={"p-layout-box"}>
                <GoBack history={this.props.history} title={"办理入住"}/>
                <div className="p-layout-content">
                    <Form
                        disabled={true}
                        onFinish={this.onFinish}
                        ref={ref => this.formRef = ref}
                        labelCol={{
                            span: 6,
                        }}
                        wrapperCol={{
                            span: 15,
                        }}
                        // initialValues={
                        // {
                        // "checkIn":[moment(),moment().add(1,'days')]
                        // }
                        // }
                    >
                        <Divider orientation="left"><b>入住信息</b></Divider>
                        <Row>
                            {/*<Col span={8}>*/}
                            {/*    <Form.Item rules={[{required: true}]} label="订单来源" name="source">*/}
                            {/*        <Select*/}
                            {/*            placeholder="请选择订单来源"*/}
                            {/*            options={[*/}
                            {/*                {*/}
                            {/*                    value: '0',*/}
                            {/*                    label: '哈奇马APP端',*/}
                            {/*                },*/}
                            {/*                {*/}
                            {/*                    value: '1',*/}
                            {/*                    label: '大众点评',*/}
                            {/*                },*/}
                            {/*                {*/}
                            {/*                    value: '2',*/}
                            {/*                    label: '线下门店',*/}
                            {/*                },*/}
                            {/*            ]}*/}
                            {/*        />*/}
                            {/*    </Form.Item>*/}
                            {/*</Col>*/}
                            {/*<Col span={16}></Col>*/}
                            <Col span={8}>
                                <Form.Item rules={[{required: true}]} label="宠主姓名" name="memberName">
                                    <Input maxLength={6} placeholder="请输入办理入住的宠物主人姓名"/>
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item rules={[{required: true}]} label="手机号码" name="memberPhone">
                                    <Input maxLength={11} placeholder="请输入手机号码"/>
                                </Form.Item>
                            </Col>
                            {/*<Col span={8}>*/}
                            {/*    <Form.Item rules={[{required: true}]} label="关联订单（外部）" name="order">*/}
                            {/*        <Input maxLength={30} placeholder="请输入外部订单编号"/>*/}
                            {/*    </Form.Item>*/}
                            {/*</Col>*/}
                        </Row>
                        <Divider orientation="left" className={"divider"}><b>宠物信息</b></Divider>
                        <Row>
                            <Col span={8}>
                                <Form.Item rules={[{required: true}]} label="宠物昵称" name="petName">
                                    <Input maxLength={20} placeholder="请输入宠物昵称"/>
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item rules={[{required: true}]} label="宠物品种" name="petVarieties">
                                    <Input maxLength={20} placeholder="请输入宠物品种"/>
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item label="宠物生日" name="birthday">
                                    <DatePicker style={{width: "100%"}} placeholder="请选择宠物生日"/>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={8}>
                                <Form.Item rules={[{required: true}]} label="宠物性别" name="petSex">
                                    <Select
                                        placeholder="请选择宠物性别"
                                        options={[
                                            {
                                                value: 1,
                                                label: '公',
                                            },
                                            {
                                                value: 2,
                                                label: '母',
                                            },
                                        ]}
                                    />
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item rules={[{required: true}]} label="绝育情况" name="sterilizationStatus">
                                    <Select
                                        placeholder="请选择绝育情况"
                                        options={[
                                            {
                                                value: 'Y',
                                                label: '已绝育',
                                            },
                                            {
                                                value: 'N',
                                                label: '未绝育',
                                            },
                                        ]}
                                    />
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item rules={[{required: true}]} label="是否已打疫苗" name="vaccineStatus">
                                    <Select
                                        placeholder="请选择疫苗情况"
                                        options={[
                                            {
                                                value: 'Y',
                                                label: '已打疫苗',
                                            },
                                            {
                                                value: 'N',
                                                label: '未打疫苗',
                                            },
                                        ]}
                                    />
                                </Form.Item>
                            </Col>
                        </Row>
                        <Divider orientation="left" className={"divider"}><b>房间信息</b></Divider>
                        <Row>
                            <Col span={8}>
                                <Form.Item rules={[{required: true}]} label="居住日期" name="checkIn"
                                           tooltip="入住日期 ~ 离店日期">
                                    <RangePicker
                                        onChange={this.onChangeCheckIn}
                                        style={{width: "100%"}}
                                        disabledDate={this.disabledDate}
                                        allowClear={false}
                                    />
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item rules={[{required: true}]} label="入住天数" name="days">
                                    <Input/>
                                </Form.Item>
                            </Col>
                            <Col span={8}></Col>
                            <Col span={24}>
                                <Form.Item labelCol={{span: 2}} wrapperCol={{span: 21}} rules={[{required: true}]}
                                           label="选择房型" name="room">
                                    <TheTable columns={columns} dataSource={dataSource}/>
                                    {/*<Descriptions column={4} title="" layout="vertical" bordered>*/}
                                    {/*    <Descriptions.Item label="房型列表">【自营品牌】豪华猫咪VIP房间</Descriptions.Item>*/}
                                    {/*    <Descriptions.Item label="房间价格（前台默认价格）">399.00</Descriptions.Item>*/}
                                    {/*    <Descriptions.Item label="价格日历（价格）">199.00</Descriptions.Item>*/}
                                    {/*    <Descriptions.Item label="排房">003房间</Descriptions.Item>*/}
                                    {/*</Descriptions>*/}
                                </Form.Item>
                            </Col>
                            {/*<Col span={24}>*/}
                            {/*    <Form.Item*/}
                            {/*        wrapperCol={{*/}
                            {/*            offset: 0,*/}
                            {/*            span: 24,*/}
                            {/*        }}*/}
                            {/*        style={{*/}
                            {/*            textAlign:"center"*/}
                            {/*        }}*/}
                            {/*    >*/}
                            {/*        <Space size={30}>*/}
                            {/*            <Button size={"large"} loading={btnLoading} htmlType="submit" type="primary">保存</Button>*/}
                            {/*            <Button size={"large"} onClick={() => this.props.history.goBack()}>取消</Button>*/}
                            {/*        </Space>*/}
                            {/*    </Form.Item>*/}
                            {/*</Col>*/}
                        </Row>
                    </Form>
                    <Row style={{textAlign: "center"}}>
                        <Col span={24}>
                            <Space size={30}>
                                <Button size={"large"} loading={btnLoading} onClick={this.onFinish}
                                        type="primary">提交</Button>
                                <Button size={"large"} onClick={() => this.props.history.goBack()}>取消</Button>
                            </Space>
                        </Col>
                    </Row>
                </div>
            </div>
        );
    }
}

export default CheckIn;
